<template>
    <div class="container yuan-container">

        <a-card title="医生信息管理">
            <div class="filter-panel">
                <div class="filter-list">
                    <a-input-search allowClear v-model="pageParams.name" placeholder="姓名、职位" @search="resetList" />
                </div>
                <div class="filter-list">
                    <span>所属科室：</span>
                    <a-cascader class="yuan-form-input" style="max-width:500px" :options="departList" :changeOnSelect="true"
                        :fieldNames="{label:'name',value:'id',children: 'children'}" placeholder="请选择所属科室"
                        @change="onCategoryChange" />
                </div>
                <div style="float:right" class="filter-list" v-if="userType==='ORGAN'">
                    <a-button type="primary" @click="add" v-if="$checkPer(['doctorAdd'])">新增</a-button>
                </div>

            </div>
            <div class="table">
                <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id" :columns="columns" :data-source="pageList"
                    :pagination="pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div v-if="userType==='ORGAN' && $checkPer(['doctorEdit'])">
                            <a-button type="primary" @click="clickEdit(record)">编辑</a-button>
                            <a-popconfirm okText="确定" cancelText="取消" title="是否禁用该医生" @confirm="clickDisable(record)"
                                v-if="record.status===1">
                                <a-button type="danger">禁用</a-button>
                            </a-popconfirm>
                            <a-popconfirm okText="确定" cancelText="取消" title="是否启用该医生" @confirm="clickOpen(record)" v-else>
                                <a-button type="success">启用</a-button>
                            </a-popconfirm>
                        </div>
                        <div v-else>
                            <a-button type="primary" @click="clickShow(record)">查看</a-button>
                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :editInfo="editInfo"
            @resetList="resetList" :isShow="isShow"/>
    </div>
</template>
<script lang="ts">
import platformApi from "@/api/platformApi";
import { getStorageUserInfo } from "@/utils";
import { h } from "vue";
import { Component, Vue } from "vue-property-decorator";
import DetailVue from "./detail.vue";
@Component({
    name: "tpl",
    components: { DetailVue },
})
export default class extends Vue {
    loading = false;
    expandedRowKeys: any[] = [];
    pageList: any[] = [];
    pageParams = {
        name: "",
        stairOfficesDirector: "",
        twoOfficesDirector: "",
    };
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    columns = [
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "医生姓名",
        },
        {
            align: "center",
            dataIndex: "job",
            key: "job",
            title: "职位",
        },
        {
            align: "center",
            dataIndex: "placeOrganizationName",
            key: "placeOrganizationName",
            title: "所属机构",
        },
        {
            align: "center",
            dataIndex: "stairOfficesDirector",
            key: "stairOfficesDirector",
            title: "所属科室",
            customRender: (text: string, record: any, index: number) => {
                return this.getKSname(record);
            },
        },
        {
            align: "center",
            dataIndex: "pageTable2",
            key: "pageTable2",
            title: "状态",
            customRender: (text: string, record: any, index: number) => {
                const statusList = [
                    { id: 0, name: "禁用", class: "c-danger" },
                    { id: 1, name: "启用", class: "c-success" },
                ];
                const findData = statusList.find((item) => {
                    return item.id === record.status;
                });
                if (findData) {
                    return h("span", { class: findData.class }, findData.name);
                }
                return "";
            },
        },
        {
            align: "center",
            dataIndex: "ifOnLineConsult",
            key: "ifOnLineConsult",
            title: "是否开通在线咨询",
            customRender: (text: string, record: any, index: number) => {
                if (record.ifOnLineConsult === 1) {
                    return h("span", { class: "c-success" }, "开通");
                } else {
                    return h("span", { class: "c-danger" }, "未开通");
                }
            },
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 180,
            scopedSlots: { customRender: "action" },
        },
    ];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await platformApi.findDoctorList({
                ...this.pageParams,
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
            });

            this.pageList = res.data?.rows || [];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }
    userType=''
    async mounted() {
        const userInfo=getStorageUserInfo()
        this.userType=userInfo.type
        await this.getDepart();
        this.getList();
    }
    departList: any[] = [];
    async getDepart() {
        this.loading = true;
        try {
            const res = await platformApi.findBasicsInfoTree({
                type: "KS",
            });

            this.departList = res.data;
        } finally {
            this.loading = false;
        }
    }
    editInfo = {};
    detailVisible = false;
    isShow = false;
    add() {
        this.editInfo = {};
        this.detailVisible = true;
    }

    clickEdit(item) {
        this.isShow=false
        this.editInfo = item;
        this.detailVisible = true;
    }
    clickShow(item) {
        this.isShow=true
        this.editInfo = item;
        this.detailVisible = true;
    }

    onCategoryChange(e) {
        this.pageParams.stairOfficesDirector = e[0] || "";
        this.pageParams.twoOfficesDirector = e[1] || "";
        this.resetList();
    }
    getKSname(item) {
        const parent = this.departList.find((depart) => {
            return depart.id === Number(item.stairOfficesDirector);
        });
        if (parent) {
            if (item.twoOfficesDirector) {
                const child = parent.children.find((child) => {
                    return child.id === Number(item.twoOfficesDirector);
                });
                return parent.name + "/" + (child?.name || '');
            } else {
                return parent.name;
            }
        }
        return "";
    }

    async clickDisable(item) {
        this.loading = true;
        try {
            await platformApi.updateDoctorStatus({
                id: item.id,
                status: 0,
            });
            this.$message.success("禁用成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }
    async clickOpen(item) {
        this.loading = true;
        try {
            await platformApi.updateDoctorStatus({
                id: item.id,
                status: 1,
            });
            this.$message.success("启用成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }
}
</script>
<style scoped lang="scss">
.container {
}
</style>
